<template>
	<div style="background-color: #000;min-height: 100vh;color: #fff;">
		<div style="position: relative;height:4em;overflow: hidden;">
			<div style="position:absolute;top: 0;left: 0;right: 0;height: 7em;background-color: #fff;opacity: 0.5;">
			</div>
			<div style="position: absolute;left: 1.0em;top: 0px;">
				<image :src="imgHttp + '/test/bg/logo.png'" style="height: 4em;width: 7em;"></image>
			</div>
		</div>
		<div @click="toIndex" style="display: flex;justify-items: center;margin: 0.5em;">
			<div>
				<image :src="imgHttp+'/test/back.png'" style="width: 1.5em;height:1.5em;"></image>
			</div>
			<div style="font-size: 1em;">返回首页</div>
		</div>
		<div style="font-size: 1.5em;margin-bottom: 1.0em;margin-left: 0.3em;">系列列表</div>

		<div>
			<div>
				<div style="width: 50%;float: left;position: relative;" v-if="startIndex < objs.length">
					<div style="margin: 0.3em;border: 1px solid #fff;border-radius: 5px;min-height: 8em;" @click="toMx(objs[startIndex])">
						<image :src="http + objs[startIndex].prDetail" style="width: 100%;height: 7.7em"></image>
					</div>
					<div
						style="position:absolute;bottom: 0;left: 0;right: 0;height: 1.5em; padding-left: 0.3em;padding-right: 0.3em; ">
						<div
							style="position: absolute;left: 0.3em;bottom: 0;height: 1.5em;width:calc(100% - 0.6em);background-color: #fff;opacity: 0.5;z-index: 0;">
						</div>
						<div style="width: 0.5em;background-color: red;float: left;height: 1.5em;"></div>
						<div style="float: left;margin-left: 0.2em;">{{objs[startIndex].prModel}}</div>
						<div class="clear"></div>
					</div>
				</div>
				<div style="width: 50%;float: left;position: relative;" v-if="startIndex + 1 < objs.length">
					<div style="margin: 0.3em;border: 1px solid #fff;border-radius: 5px;min-height: 8em;" @click="toMx(objs[startIndex+1])">
						<image :src="http + objs[startIndex + 1].prDetail" style="width: 100%;height: 7.7em"></image>
					</div>
					<div
						style="position:absolute;bottom: 0;left: 0;right: 0;height: 1.5em; padding-left: 0.3em;padding-right: 0.3em; ">
						<div
							style="position: absolute;left: 0.3em;bottom: 0;height: 1.5em;width:calc(100% - 0.6em);background-color: #fff;opacity: 0.5;z-index: 0;">
						</div>
						<div style="width: 0.5em;background-color: red;float: left;height: 1.5em;"></div>
						<div style="float: left;margin-left: 0.2em;">{{objs[startIndex + 1].prModel}}</div>
						<div class="clear"></div>
					</div>
				</div>
				<div class="clear"></div>
			</div>
			<div>
				<div style="width: 50%;float: left;position: relative;" v-if="startIndex + 2 < objs.length">
					<div style="margin: 0.3em;border: 1px solid #fff;border-radius: 5px;min-height: 8em;" @click="toMx(objs[startIndex+2])">
						<image :src="http + objs[startIndex + 2].prDetail" style="width: 100%;height: 7.7em"></image>
					</div>
					<div
						style="position:absolute;bottom: 0;left: 0;right: 0;height: 1.5em; padding-left: 0.3em;padding-right: 0.3em; ">
						<div
							style="position: absolute;left: 0.3em;bottom: 0;height: 1.5em;width:calc(100% - 0.6em);background-color: #fff;opacity: 0.5;z-index: 0;">
						</div>
						<div style="width: 0.5em;background-color: red;float: left;height: 1.5em;"></div>
						<div style="float: left;margin-left: 0.2em;">{{objs[startIndex + 2].prModel}}</div>
						<div class="clear"></div>
					</div>
				</div>
				<div style="width: 50%;float: left;position: relative;" v-if="startIndex + 3 < objs.length">
					<div style="margin: 0.3em;border: 1px solid #fff;border-radius: 5px;min-height: 8em;" @click="toMx(objs[startIndex+3])">
						<image :src="http + objs[startIndex + 3].prDetail" style="width: 100%;height: 7.7em"></image>
					</div>
					<div
						style="position:absolute;bottom: 0;left: 0;right: 0;height: 1.5em; padding-left: 0.3em;padding-right: 0.3em; ">
						<div
							style="position: absolute;left: 0.3em;bottom: 0;height: 1.5em;width:calc(100% - 0.6em);background-color: #fff;opacity: 0.5;z-index: 0;">
						</div>
						<div style="width: 0.5em;background-color: red;float: left;height: 1.5em;"></div>
						<div style="float: left;margin-left: 0.2em;">{{objs[startIndex + 3].prModel}}</div>
						<div class="clear"></div>
					</div>
				</div>
				<div class="clear"></div>
			</div>
			<div>
				<div style="width: 50%;float: left;position: relative;" v-if="startIndex + 4 < objs.length">
					<div style="margin: 0.3em;border: 1px solid #fff;border-radius: 5px;min-height: 8em;" @click="toMx(objs[startIndex+4])">
						<image :src="http + objs[startIndex + 4].prDetail" style="width: 100%;height: 7.7em"></image>
					</div>
					<div
						style="position:absolute;bottom: 0;left: 0;right: 0;height: 1.5em; padding-left: 0.3em;padding-right: 0.3em; ">
						<div
							style="position: absolute;left: 0.3em;bottom: 0;height: 1.5em;width:calc(100% - 0.6em);background-color: #fff;opacity: 0.5;z-index: 0;">
						</div>
						<div style="width: 0.5em;background-color: red;float: left;height: 1.5em;"></div>
						<div style="float: left;margin-left: 0.2em;">{{objs[startIndex + 4].prModel}}</div>
						<div class="clear"></div>
					</div>
				</div>
				<div style="width: 50%;float: left;position: relative;" v-if="startIndex + 5 < objs.length">
					<div style="margin: 0.3em;border: 1px solid #fff;border-radius: 5px;min-height: 8em;" @click="toMx(objs[startIndex+5])">
						<image :src="http + objs[startIndex + 5].prDetail" style="width: 100%;height: 7.7em"></image>
					</div>
					<div
						style="position:absolute;bottom: 0;left: 0;right: 0;height: 1.5em; padding-left: 0.3em;padding-right: 0.3em; ">
						<div
							style="position: absolute;left: 0.3em;bottom: 0;height: 1.5em;width:calc(100% - 0.6em);background-color: #fff;opacity: 0.5;z-index: 0;">
						</div>
						<div style="width: 0.5em;background-color: red;float: left;height: 1.5em;"></div>
						<div style="float: left;margin-left: 0.2em;">{{objs[startIndex + 5].prModel}}</div>
						<div class="clear"></div>
					</div>
				</div>
				<div class="clear"></div>
			</div>
			<div style="text-align: center;margin-top: 0.3em;">
				<span @click="preBt">《</span>
				<span style="padding-left: 1.5em;padding-right: 1.5em;">{{ currentPage }}</span>
				<span @click="nextBt">》</span>
			</div>
		</div>

	</div>
</template>

<script>
	import api from '@/common/httprequest.js'
	export default {
		data() {
			return {
				imgHttp: api.getImgUrl(),
				http: api.getUrl(),
				total: 0,
				startIndex: 0,
				currentPage: 1,
				obj: {},
				objs: []
			}
		},
		onLoad() {
			this.loadData();
		},
		mounted() {

		},
		methods: {
			toMx(obj){
				var jsonStr = JSON.stringify(obj);
				uni.redirectTo({
					url:'/pages/jmd/goods?data=' + encodeURIComponent(jsonStr)
				})
			},
			nextBt() {
				var pageNumber = this.total / 6;
				if (this.currentPage < pageNumber) {
					this.currentPage++;
					this.startIndex = (this.currentPage - 1) * 6 ;
				}else{
					uni.showToast({
						icon:'error',
						title:'已经是最后一页',
						duration:1000
					})
				}
			},
			preBt() {
				if(this.currentPage > 1){
					this.currentPage--;
					this.startIndex = (this.currentPage - 1) * 6 ;
				}
			},
			toIndex() {
				uni.switchTab({
					url: '../index/index'
				})
			},
			loadData() {
				uni.showLoading({
					title: '数据处理中...'
				});
				api.request({
					method: "GET",
					url: "/applet/model/list",
					params: {
						"prShow": 0,
						"pageSize": 1000
					},
				}).then(res => {
					uni.hideLoading();
					//alert(JSON.stringify(res));				
					if (res.code == 200) {
						this.objs = res.rows;
						this.total = res.total;
						//alert(JSON.stringify(this.objs));
					}
				});
			}
		}
	}
</script>

<style>
	.clear {
		clear: both;
	}
</style>